<template>
  <div class="max">
    <div class="shaixuan">
      <span class="el-icon-zoom-in chaxun">筛选查询</span>
      <el-button class="btn-one" @click="chaxun">查询结果</el-button>
      <el-button class="el-icon-arrow-up btn-two">收起查询</el-button>
    </div>
    <div class="shaixuan1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="起止时间:">
          <el-time-picker
            is-range
            v-model="value1"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="拜访人员：">
          <el-input v-model="formInline.region" placeholder="拜访人员">
          </el-input>
        </el-form-item>
        <el-form-item label="客户名字：">
          <el-input v-model="formInline.user" placeholder="客户名字"></el-input>
        </el-form-item>
        <el-form-item label="客户类型：">
          <el-select v-model="formInline.kehu" placeholder="拜访人员">
          </el-select>
          <el-form-item label="有效次数>=:">
            <el-input
              v-model="formInline.youxiao"
              placeholder="客户名字"
            ></el-input>
          </el-form-item>
          <el-form-item label="拜访次数>=:">
            <el-input
              v-model="formInline.cishu"
              placeholder="客户名字"
            ></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div class="right-menu">
      <el-button class="outport" @click="Exportpart">部分导出</el-button>
      <el-button class="outport" @click="Exportpart2">全部导出</el-button>
    </div>
    <div class="table-1">
      <el-table
        class="table-1"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column
          prop="customerType"
          label="客户类型"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="leaderPerson"
          label="负责人"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="effectiveTime"
          label="有效次数"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="visitTime"
          label="拜访次数"
          width="120"
        ></el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { BaiciApi } from "@/http/XingweiApi/huoQueApi";
import {
  Exportall2Api,
  Exportpart2Api,
  BftApi,
} from "@/http/XingweiApi/delApi";
import { fileExport } from "@/util/export";

export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      size: 10,
      currentPage4: 5,
      startTime: "",
      endTime: "",
      formInline: {
        user: "",
        region: "",
      },
      selection: [],
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    };
  },
  created() {
    this.init(this.page);
  },
  methods: {
    init(page) {
      BaiciApi(page)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          // this.total=res.data.count
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询数据
    chaxun() {
      console.log(123);
      BftApi(this.formInline)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onSubmit() {
      console.log("submit!");
    },
    handleEdit(index, row) {
      console.log(index, row);
      alert("123");
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    Exportall2() {
      console.log(1);
      Exportall2Api()
        .then((res) => {
          console.log(res);
          fileExport(res.data, "导出");
        })
        .catch((err) => {
          console.log("获取列表失败：", err);
        });
    },

    Exportpart2() {
      let ids = this.selection.map((v) => {
        return v.id;
      });
      console.log(ids);
      Exportpart2Api(ids)
        .then((res) => {
          console.log(res);
          fileExport(res.data, "导出");
        })
        .catch((err) => {
          console.log("获取列表失败：", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.max-hard {
  width: 100%;
  height: 50px;
  background-color: rgba(243, 243, 243);
  line-height: 50px;
  h4 {
    // padding-left: 80px;
    float: left;
    color: #666;
  }
  .btn {
    float: right;
    margin-top: 5px;
    // margin-right: 100px;
  }
}
.shaixuan {
  // margin-right: 100px;
  // margin-left: 80px;
  margin-top: 20px;
  height: 60px;
  line-height: 60px;
  background-color: rgba(243, 243, 243);
  border: 1px solid #999;
  span {
    display: inline-block;
  }
  .chaxun {
    margin-left: 20px;
  }
  .btn-one {
    float: right;
    height: 40px;
    margin-top: 10px;
    margin-right: 20px;
  }
  .btn-two {
    float: right;
    height: 40px;
    margin-top: 10px;
  }
}
.shaixuan1 {
  // margin-right: 100px;
  // margin-left: 80px;
  background-color: white;
  border: 1px solid #999;
  .demo-form-inline {
    padding-top: 10px;
    margin-left: 20px;
  }
}
.table-1 {
  // margin-left:80px;
  // margin-right:100px;
  margin-top: 20px;
  border: 1px solid #999;
}

.block {
  margin-left: 630px;
}
.shuaixuan-bt {
  // height: 60px;
  // margin-left: 80px;
  //  margin-right: 100px;
  // line-height: 60px;
  margin-top: 40px;
  background-color: #fff;
  border: 1px solid #999;
  .shai {
    margin-left: 20px;
    padding: 10px;
  }
}
</style>
